<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <link href="../css/element.css" rel="stylesheet"/>
    <link href="../css/styleindex.css" rel="stylesheet"/>
    <style>
    .el-textarea{
      width: 100%!important;
    }.el-textarea .el-textarea__inner{
      border: 0;
      background-color: #e9e9e9;
    }.el-select{
      width: 100%;
    }
    </style>
</head>
<body style="background:#EFF0F4;">

  <div class="mui-content">
    <div id="vm" class="x-examok" v-cloak>
      <div class="x-header-g" id="header"  v-show="!isfromindex">
        <a class="x-header-arrow" @click="api.closeWin()"></a>
        <div class="x-header-t">工作台-人事异动</div>
      </div>
      <div id="viewcan">
        <!-- 员工资料 -->
        <div class="x-pro-list">
          <div class="x-pro-top">员工资料</div>
          <div class="x-pro-pro">
            <div class="x-pro-left">
              <div class="x-pro-row">
                <div class="x-pro-label">姓名:</div>
                <div class="x-pro-input">
                  {{input1}}
                </div>
              </div>
              <!-- <div class="x-pro-row">
                <div class="x-pro-label">职位:</div>
                <div class="x-pro-input">
                  {{input2}}
                </div>
              </div> -->
              <div class="x-pro-row" v-if="istype==1">
                <div class="x-pro-label">部门:</div>
                <div class="x-pro-input">
                  {{input3}}
                </div>
              </div>
              <div class="x-pro-row" v-else>
                <div class="x-pro-label">店面:</div>
                <div class="x-pro-input">
                  {{input3}}
                </div>
              </div>
              <div class="x-pro-row">
                <div class="x-pro-label">电话:</div>
                <div class="x-pro-input">
                  {{input5}}
                </div>
              </div>
            </div>
            <div class="x-pro-right">
              <div class="x-pro-himg" :style="{'background-image':'url(' +input4+ ')','background-size':'cover','width':'4.5rem','height':'6rem','border-radius':'0.4rem','margin-bottom':'0.6rem'}" v-if="input4!=''"></div>
              <div class="x-pro-himg" v-else></div>
              <div class="x-pro-sbtn" @click="imgPer"  v-show="!isfromindex">添加照片</div>
            </div>
          </div>
        </div>
        <!-- 异动资料 -->
        <div class="x-pro-list" v-show="!isfromindex">
            <el-collapse v-model="activeNames2">
              <el-collapse-item title="异动资料" name="1">
                <div class="x-pro-pro2">
                  <!-- <div style="background-color:#f5f5f5;border-radius:.4rem;"> -->
                    <div class="x-pro-row">
                      <div class="x-pro-label">原工作组:</div>
                      <div class="x-pro-input">
                        <el-input placeholder="" v-model="workgroupdata" :disabled="isdisabled"></el-input>
                      </div>
                    </div>
                    <div class="x-pro-row">
                      <div class="x-pro-label">原职务:</div>
                      <div class="x-pro-input">
                        <el-input placeholder="" v-model="moveshop" :disabled="isdisabled"></el-input>
                      </div>
                    </div>
                  <!-- </div> -->

                  <div class="x-pro-row">
                    <div class="x-pro-label">异动时间</div>
                    <div class="x-pro-input">
                      <el-date-picker v-model="movedate" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" :disabled="isfromindex" :editable="notkey"></el-date-picker>
                    </div>
                  </div>
                  <!-- <div class="x-pro-row">
                    <div class="x-pro-label">异动职级</div>
                    <div class="x-pro-input">
                      <el-select v-model="movestar" placeholder="新员工" @change="seepp" :disabled="isfromindex">
                        <el-option v-for="item in workgroup" :key="item.id" :label="item.title" :value="item.id"></el-option>
                      </el-select>
                    </div>
                  </div> -->
                  <div class="x-pro-row">
                    <div class="x-pro-label">带训人</div>
                    <div class="x-pro-input">
                      <el-select v-model="getperson" placeholder="请选择" @change="seepp" :disabled="isfromindex">
                        <el-option v-for="item in persondata" :key="item.id" :label="item.username" :value="item.id"></el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="x-pro-row">
                    <div class="x-pro-label">考核人</div>
                    <div class="x-pro-input">
                      <el-select v-model="examperson" placeholder="请选择" :disabled="isfromindex">
                        <el-option v-for="item in persondata" :key="item.id" :label="item.username" :value="item.id"></el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="x-pro-row">
                    <div class="x-pro-label">异动工作组</div>
                    <div class="x-pro-input">
                      <el-select v-model="moveworkgroup" placeholder="请选择" @change="workgroupto" :disabled="isfromindex">
                        <el-option v-for="item in workgroupnew" :key="item.id" :label="item.title" :value="item.id"></el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="x-pro-row">
                    <div class="x-pro-label">异动职务</div>
                    <div class="x-pro-input">
                      <el-select v-model="movestore" placeholder="请选择" @change="seepp" :disabled="isfromindex">
                        <el-option v-for="item in workgroupnew2" :key="item.id" :label="item.title" :value="item.id"></el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="x-pro-row">
                    <div class="x-pro-label">家庭住址</div>
                    <div class="x-pro-input">
                      <el-input placeholder="请输入内容" v-model="moveaddr" :disabled="isfromindex"></el-input>
                    </div>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
        </div>
        <!-- 异动原因 -->
        <div class="x-pro-list" v-show="!isfromindex">
            <el-collapse v-model="activeNames3">
              <el-collapse-item title="异动原因" name="1">
                <div class="x-pro-pro2">
                  <div class="x-pro-row">
                    <el-input placeholder="请输入内容" v-model="tryidea" type="textarea" :rows="4" :disabled="isfromindex"></el-input>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
        </div>
        <!-- 审批人 -->
        <div class="x-pro-list" v-show="!isfromindex">
          <div class="x-pro-top">审批人</div>
          <div class="x-pro-pro">
            <el-select v-model="evaperson" placeholder="请选择" :disabled="isfromindex">
              <el-option v-for="item in persondata" :key="item.id" :label="item.username" :value="item.id"></el-option>
            </el-select>
          </div>
        </div>
        <!-- 异动资料只读 -->
        <div class="x-pro-list" v-show="isfromindex" v-for="item in workview_data" :key="item.key">
            <el-collapse v-model="activeNames2">
              <el-collapse-item title="异动资料" name="1">
                <div class="x-pro-pro2">
                  <!-- <div style="background-color:#f5f5f5;border-radius:.4rem;"> -->
                    <div class="x-pro-row">
                      <div class="x-pro-label">原工作组:</div>
                      <div class="x-pro-input">
                        <el-input placeholder="" v-model="item.before_dept" :disabled="isdisabled"></el-input>
                      </div>
                    </div>
                    <div class="x-pro-row">
                      <div class="x-pro-label">原职务:</div>
                      <div class="x-pro-input">
                        <el-input placeholder="" v-model="item.before_job" :disabled="isdisabled"></el-input>
                      </div>
                    </div>
                  <!-- </div> -->

                  <div class="x-pro-row">
                    <div class="x-pro-label">异动时间</div>
                    <div class="x-pro-input">
                      <el-date-picker v-model="item.in_date" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" :disabled="isfromindex" :editable="notkey"></el-date-picker>
                    </div>
                  </div>
                  <!-- <div class="x-pro-row">
                    <div class="x-pro-label">异动职级</div>
                    <div class="x-pro-input">
                      <el-select v-model="item.levelid" placeholder="请选择" @change="seepp" :disabled="isfromindex">
                        <el-option v-for="item in workgroup" :key="item.id" :label="item.title" :value="item.id"></el-option>
                      </el-select>
                    </div>
                  </div> -->
                  <div class="x-pro-row">
                    <div class="x-pro-label">带训人</div>
                    <div class="x-pro-input">
                      <el-select v-model="item.take_memberid" placeholder="请选择" @change="seepp" :disabled="isfromindex">
                        <el-option v-for="item in persondata" :key="item.id" :label="item.username" :value="item.id"></el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="x-pro-row">
                    <div class="x-pro-label">考核人</div>
                    <div class="x-pro-input">
                      <el-select v-model="item.exam_memberid" placeholder="请选择" :disabled="isfromindex">
                        <el-option v-for="item in persondata" :key="item.id" :label="item.username" :value="item.id"></el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="x-pro-row">
                    <div class="x-pro-label">异动工作组</div>
                    <div class="x-pro-input">
                      <el-select v-model="item.after_dept" placeholder="请选择" @change="workgroupto" :disabled="isfromindex">
                        <el-option v-for="item in workgroupnew" :key="item.id" :label="item.title" :value="item.id"></el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="x-pro-row">
                    <div class="x-pro-label">异动职务</div>
                    <div class="x-pro-input">
                      <el-select v-model="item.after_job" placeholder="请选择" @change="seepp" :disabled="isfromindex">
                        <el-option v-for="item in workgroupnew2" :key="item.id" :label="item.title" :value="item.id"></el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="x-pro-row">
                    <div class="x-pro-label">家庭住址</div>
                    <div class="x-pro-input">
                      <el-input placeholder="请输入内容" v-model="item.home_addr" :disabled="isfromindex"></el-input>
                    </div>
                  </div>
                  <div class="x-pro-row">
                    <div class="x-pro-label">异动原因</div>
                    <div class="x-pro-input">
                      <el-input placeholder="请输入内容" v-model="item.mark" type="textarea" :rows="4" :disabled="isfromindex"></el-input>
                    </div>
                  </div>
                  <div class="x-pro-row">
                    <div class="x-pro-label">审批人</div>
                    <div class="x-pro-input">
                      <el-select v-model="item.check_memberid" placeholder="请选择" :disabled="isfromindex">
                        <el-option v-for="item in persondata" :key="item.id" :label="item.username" :value="item.id"></el-option>
                      </el-select>
                    </div>

                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
        </div>
      </div>

      <!--  -->
      <div class="x-pro-gobtn" @click="beforeisok" v-show="!isfromindex">提交</div>
      <div @click="getcanvas" class="x-pro-gobtn" v-show="isfromindex">保存到相册</div>
      <canvas width="320" height="180" style="width:160px;height:90px;" id="img"></canvas>
    </div>
  </div>

  <script type="text/javascript" src="../script/vue.js"></script>
  <script type="text/javascript" src="../script/element.js"></script>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript" src="../script/base.js"></script>
  <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
  <script type="text/javascript" src="../script/canvas2image.js"></script>
	<script>
apiready = function () {
    var tid = api.pageParam.id;
    var tidonlysee = api.pageParam.isonlysee;//是否只读
    $api.fixStatusBar($api.byId('header'));

    //
    var vm = new Vue({
      el:'#vm',
      data(){
        return{
          thproid:'',
          isfromindex:false,
          //员工资料
          input1:'',
          input2:'',
          input3:'',
          input4:'',
          input5:'',
          istype:'',//
          activeNames1: ['1'],
          activeNames2: ['1'],
          activeNames3: ['1'],
          //办理入职
          enterwork:[{
            'title':'',
            'index':0
          }],
          entry_date:'',//入职时间
          entryworkindex:0,
          //异动资料
          isdisabled:true,//禁用原工作组 原职务
          movedate:'',//异动时间
          workgroupdata:'',//原工作组
          moveshop:'',//原职务
          movestar:'',//异动职级
          workgroup:[],//异动职级 源
          prodation_date2:'',
          getperson:'',//带训人
          examperson:'',//考核人
          persondata:[],//带训人考核人审批人 源
          examokdate:'',
          moveworkgroup:'',//异动工作组
          workgroupnew:[],//异动工作组 源
          movestore:'',//异动职务
          workgroupnew2:[],//异动职务 源
          moveaddr:'',//家庭住址
          //异动原因
          tryidea:'',//异动原因
          //审批人
          evaperson:'',//审批人
          //
          subid:0,
          thidonlysee:false,
          workview_data:'',//只读的data
          notkey:false,

        }
      },
      created:function() {
        var that=this;


      },
      mounted:function(){
        var that=this;
        that.thproid = tid;//id

        that.thidonlysee = tidonlysee;//只读
        if(that.thidonlysee){//来自只读
          that.isfromindex = true;
        }

        that.getclassdata()//职级列表
        that.getpersondata()//人
        that.workgroupfun()//工作组
      },
      methods: {
        //保存到相册
        getcanvas:function(){
          var that = this;
          //解决安卓截图不全
          window.pageYoffset = 0;
          document.documentElement.scrollTop = 0;
          document.body.scrollTop = 0;
          api.showProgress();
          html2canvas(document.getElementById('viewcan'), {
            onrendered: function(canvas) {
  //             document.body.appendChild(canvas);

              var seev = canvas.toDataURL('image/png', 1.0);
                var baseimgdata = seev.split(',')[1];
                // console.log(baseimgdata);
                that.basetoimg(baseimgdata);
              },
           });
            // html2canvas(shareContent, opts).then(function (canvas) {
            //     var context = canvas.getContext('2d');
            //     // document.body.appendChild(canvas);//安卓放大两倍  ios放大两倍
            //     var img = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height);
            //     document.body.appendChild(img);//安卓ok  ios放大两倍
            //     console.log(canvas.width);
            //     console.log(canvas.width/2);
            //     // $(img).css({
            //     //     "width": canvas.width / 2 + "px",
            //     //     "height": canvas.height / 2 + "px",
            //     // });
            //
            //     console.log(canvas.toDataURL('image/png', 1.0))//base64
            //     var seev = canvas.toDataURL('image/png', 1.0);
            //     var baseimgdata = seev.split(',')[1];
            //     console.log(baseimgdata);
            //     that.basetoimg(baseimgdata);
            // });
        },
        //base64转图片
        basetoimg:function(base){
          var img_name = new Date().getTime()+'.png';
          var trans = api.require('trans');
          trans.saveImage({
              base64Str: base,
              album:true,
              imgPath:"fs://",
              imgName:img_name
          }, function(ret, err) {
              if (ret.status) {
                  api.hideProgress();
                  api.toast({
                      msg: '保存成功',
                      duration: 3000,
                      location: 'bottom'
                  });
              } else {
                api.hideProgress();
                api.toast({
                    msg: ret.msg,
                    duration: 3000,
                    location: 'bottom'
                });
              }
          });
        },
        //人
        getpersondata:function(){
          let that=this;
          api.ajax({
            url:baseurl+'api/person/employee',
            methods:'get',
            data:{
              values:{
                sec: $api.getStorage('apptoken'),
                id:that.thproid
              }
            }
          },function(ret,err){
            if(ret){
              api.hideProgress();
              // console.log(JSON.stringify(ret));
              if(ret.status == 1){
                that.persondata = ret.data.list;

              }else{
                api.toast({
                    msg: ret.msg,
                    duration: 3000,
                    location: 'bottom'
                });
              }
            }else{
              api.hideProgress();
              console.log(JSON.stringify(err));
              api.toast({
                  msg: err.msg,
                  duration: 3000,
                  location: 'bottom'
              });
            }
          })
        },
        //工作组联动职务
        workgroupto:function(val){
          var that = this;
          that.subid = val;
          that.workgroupnew2 = '';
          that.movestore = '';
          that.workgroupfun()//工作组
        },
        //工作组
        workgroupfun:function(){
          let that=this;
          console.log('工作组选中id：'+that.subid);
          api.ajax({
            url:baseurl+'api/person/dept',
            methods:'get',
            data:{
              values:{
                sec: $api.getStorage('apptoken'),
                // id:that.thproid,
                subid:that.subid
              }
            }
          },function(ret,err){
            if(ret){
              api.hideProgress();
              console.log(JSON.stringify(ret));
              if(ret.status == 1){
                if(that.subid==0||that.subid=='0'){
                  that.workgroupnew = ret.data.list;
                }else{
                  that.workgroupnew2 = ret.data.list;
                }



              }else{
                api.toast({
                    msg: ret.msg,
                    duration: 3000,
                    location: 'bottom'
                });
              }
            }else{
              api.hideProgress();
              console.log(JSON.stringify(err));
              api.toast({
                  msg: err.msg,
                  duration: 3000,
                  location: 'bottom'
              });
            }
          })
        },
        //回显
        backshow:function(){
          let that=this;
          api.ajax({
            url:baseurl+'api/person/job',
            methods:'get',
            data:{
              values:{
                sec: $api.getStorage('apptoken'),
                id:that.thproid,
              }
            }
          },function(ret,err){
            if(ret){
              api.hideProgress();
              console.log(JSON.stringify(ret));
              if(ret.status == 1){
                that.input1 = ret.data.info.username;
                that.input3 = ret.data.info.shop;
                that.input5 = ret.data.info.phone;
                that.input4 = ret.data.info.avatar;
                that.istype = ret.data.info.type;

                that.workgroupdata = ret.data.data.dept_title;
                that.moveshop = ret.data.data.job_title;
                that.movedate = ret.data.data.in_date;
                that.movestar = ret.data.data.levelid;
                that.getperson = ret.data.data.take_memberid;
                that.examperson = ret.data.data.exam_memberid;
                // setTimeout(function(){
                //   that.moveworkgroup = ret.data.data.after_deptid;//工作组
                //   if(that.moveworkgroup!=''&&that.moveworkgroup!=undefined){
                //     that.subid = that.moveworkgroup;
                //     that.workgroupfun()//工作组
                //   }
                // },500)

                // that.movestore = ret.data.data.after_jobid;//职务
                that.moveaddr = ret.data.data.home_addr;

                that.tryidea = ret.data.data.mark;
                that.evaperson = ret.data.data.check_memberid;

                if(that.isfromindex){//来自只读
                  that.workview_data = ret.data.view_data
                }

              }else{
                api.toast({
                    msg: ret.msg,
                    duration: 3000,
                    location: 'bottom'
                });
              }
            }else{
              api.hideProgress();
              console.log(JSON.stringify(err));
              api.toast({
                  msg: err.msg,
                  duration: 3000,
                  location: 'bottom'
              });
            }
          })
        },
        //下拉框
        seepp:function(val){
          var that = this;
          console.log(val);
        },
        //提交前确认
        beforeisok:function(){
          var that = this;
          api.confirm({
                    title: '请确认异动信息填写无误,异动记录生成后不可更改',
                    msg: '',
                    buttons: ['取消', '确认']
                }, function(ret, err) {
                    var index = ret.buttonIndex;
                    if(index=='1'){

                    }else{
                      that.isok()

                    }
                });
        },
        //提交
        isok:function(){
          var that = this;

          api.ajax({
            url:baseurl+'api/person/jobEdit',
            methods:'get',
            data:{
              values:{
                sec: $api.getStorage('apptoken'),
                id:that.thproid,
                in_date:that.movedate,
                 jobid:that.movestore,
                 take_memberid:that.getperson,
                 exam_memberid:that.examperson,
                 levelid:that.movestar,
                 home_addr:that.moveaddr,
                 mark:that.tryidea,
                 check_memberid:that.evaperson
              }
            }
          },function(ret,err){
            if(ret){
              api.hideProgress();
              console.log(JSON.stringify(ret));
              if(ret.status == 1){
                api.confirm({
                    title: '保存成功',
                    msg: '',
                    buttons: ['继续编辑', '返回']
                }, function(ret, err) {
                    var index = ret.buttonIndex;
                    if(index=='1'){

                    }else{
                      api.closeWin({});

                    }
                });

              }else{
                api.toast({
                    msg: ret.msg,
                    duration: 3000,
                    location: 'bottom'
                });
              }
            }else{
              api.hideProgress();
              console.log(JSON.stringify(err));
              api.toast({
                  msg: err.msg,
                  duration: 3000,
                  location: 'bottom'
              });
            }
          })
        },
        //职级列表
        getclassdata:function(){
          let that=this;
          api.ajax({
            url:baseurl+'api/person/level',
            methods:'get',
            data:{
              values:{
                sec: $api.getStorage('apptoken'),
                id:that.thproid
              }
            }
          },function(ret,err){
            if(ret){
              api.hideProgress();
              console.log(JSON.stringify(ret));
              if(ret.status == 1){
                that.workgroup = ret.data.list;

                that.backshow()//回显
              }else{
                api.toast({
                    msg: ret.msg,
                    duration: 3000,
                    location: 'bottom'
                });
              }
            }else{
              api.hideProgress();
              console.log(JSON.stringify(err));
              api.toast({
                  msg: err.msg,
                  duration: 3000,
                  location: 'bottom'
              });
            }
          })
        },
        //头像
        // 判断相机权限
        imgPer:function(){
          let that =this;
          var resultList = api.hasPermission({
              list:['camera','storage','photos']
          });
          if(!resultList[0].granted || !resultList[1].granted || !resultList[2].granted){
            // 没有权限
            that.reqPer()
          }else{
            // 有权限
            that.openpic()
          }
        },
        // 再请求
        reqPer:function(){
          let that =this;
          // 没有权限
          api.requestPermission({
              list:['camera','storage','photos'],
              code:1
          }, function(ret, err){
              if(ret.list[0].granted && ret.list[1].granted && ret.list[2].granted){
                // 允许
                that.openpic()
              }else{
                // 禁止
                that.noPer()
              }
              // 不再提醒
              if(ret.never){

              }
          });
        },
        // 禁止
        noPer:function(){
          let that =this;
          api.confirm({
            title: '提醒',
            msg: '没有获得 ' + '相机' + " 权限\n是否前往设置？",
            buttons: ['去设置', '取消']
          }, function(ret, err) {
            if(1 == ret.buttonIndex){
              that.reqPer();
            }
          });
        },
        //调起相机
        openpic:function(){
          let that =this;
          api.actionSheet({
              cancelTitle: '取消',
              buttons: ['相机', '相册']
          }, function(ret, err) {
              var tindex = ret.buttonIndex;
              if(tindex==1){//相机
                that.choicepic('camera')
              }else if(tindex==2){//相机
                that.choicepic('album')
              }
          });
        },
        //图片he视频上传
        choicepic:function(type){
          let that =this;
          api.getPicture({
            sourceType: type,
            encodingType: 'jpg',
            mediaValue: 'pic',
            destinationType: 'url',
            allowEdit: true,
            preview:true,
            quality: 50,
            saveToPhotoAlbum: true,
            groupName:'餐众邦'
          }, function(ret, err) {
            api.showProgress();
            if (ret) {
                console.log(JSON.stringify(ret));
                api.ajax({
                    url: baseurl+'upload/oss',
                    method: 'post',
                    data: {
                      values: {
                        "sec":$api.getStorage('apptoken'),
                      },
                      files: {
                        "file": ret.data
                      }
                    }
                }, function(ret, err) {
                  console.log(JSON.stringify(ret));
                  console.log(JSON.stringify(err));
                  api.hideProgress();
                  if(ret.status==1){
                    api.hideProgress();
                    // that.uploadvideo(ret.data[0].url)
                    that.input4 = ret.data[0].url;
                    console.log(that.input4);


                  }else{
                    api.hideProgress();
                    api.toast({
                        msg: '上传失败，请重新选择',
                        duration: 3000,
                        location: 'bottom'
                    });
                  }
                });
            } else {
                api.hideProgress();
                console.log(JSON.stringify(err));
                api.toast({
                    msg: '上传失败，请重新选择',
                    duration: 3000,
                    location: 'bottom'
                });
            }
          });
        },
        //

      }
    })
	}


	</script>
</body>
</html>
